import { ThemeConfig } from "antd";
import { colorPrimary, colorPrimaryBg_Dark, colorPrimaryBg_DarkHover, colorPrimaryBg_Light, colorPrimaryBorder, colorPrimaryHover } from "./colors";
import { common } from "./common";

export const dark: ThemeConfig = {
  ...common,
  token: {
    ...common.token,

    colorLink: colorPrimary.rgba,
    colorLinkHover: colorPrimaryHover.rgba,
    colorLinkActive: colorPrimary.rgba,

    colorPrimary: colorPrimary.rgba,
    colorPrimaryBg: colorPrimaryBg_Dark.rgba, // 不要透明，表格列 fixed时，出现穿透的问题。
    colorPrimaryBorder: colorPrimaryBorder.rgba,

    colorBgBase: 'rgb(37,37,38)',
    colorBgElevated: 'rgb(51,51,51)',
    colorBgLayout: 'rgb(15,15,15)',

    colorPrimaryTextHover: 'rgb(255,255,255)',
    colorPrimaryText: 'rgb(211,211,211)',
    colorPrimaryTextActive: 'rgb(211,211,211)',

    colorFill: 'rgb(51,51,51)',
    colorFillSecondary: 'rgb(51,51,51)',
    colorFillTertiary: 'rgb(51,51,51)',
    colorFillQuaternary: 'rgb(51,51,51)',

    colorText: 'rgb(211,211,211)',
    colorTextSecondary: 'rgb(169,169,169)',
    colorTextTertiary: 'rgb(128,128,128)',
    colorTextQuaternary: 'rgb(105,105,105)',

    colorBorder: 'rgb(71,71,71)',
    colorBorderSecondary: 'rgb(71,71,71)',

  },
  components: {
    Divider: {
      colorSplit: 'rgba(250, 250, 250, 0.06)',
    },
    Table: {
      rowSelectedHoverBg: colorPrimaryBg_DarkHover.rgba
    },
    Menu: {
      itemSelectedColor: 'rgb(255,255,255)'
    }
  }
}
